<template>
  <div class="common-layout">
    <el-container>
      <el-header height="100%">
        <HeaderView />
      </el-header>
      <el-main height="100%" style="background-color: #F5F5F5;">
        <div class="communication-box">
          <div class="post-list">
            <div v-for="(post, index) in posts" :key="index" class="post-item">
              <div class="post-header">
                <img :src="post.userImg" alt="用户头像" class="user-avatar" />
                <div class="user-info">
                  <h3>{{ post.username }}</h3>
                  <p>{{ post.userCommunication.createTime }}</p>
                </div>
              </div>
              <div class="post-content">
                <div class="post-images" style="margin: 20px 0;">
                  <img style="width: 200px;" v-for="(img, imgIndex) in post.imgs" :key="imgIndex" :src="img.url"
                    alt="分享图片" class="post-image" />
                </div>
                <p>{{ post.userCommunication.content }}</p>
              </div>
            </div>
          </div>
          <div class="floating-button" @click="sharePost">
            <span>+</span>
          </div>
          <div v-if="showMask" class="mask" @click="closeMask"></div>
          <div v-if="showMask" class="mask-content">
            <el-input v-model="newPostContent" placeholder="输入分享内容" type="textarea" rows="4"></el-input>
            <el-form-item prop="name">
              <label for="image" style="cursor: pointer;display: flex;align-items: center;">
                上传图片
                <svg style="width: 20px; height: 20px;" t="1739873239062" class="icon" viewBox="0 0 1024 1024"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2282" width="200" height="200">
                  <path
                    d="M512 958.016611c-119.648434 0-232.1288-46.367961-316.736783-130.559656-84.640667-84.255342-131.263217-196.255772-131.263217-315.455235 0-119.168499 46.624271-231.199892 131.232254-315.424271 84.607983-84.191695 197.088348-130.559656 316.736783-130.559656s232.1288 46.367961 316.704099 130.559656c84.67163 84.224378 131.263217 196.255772 131.263217 315.391587 0.032684 119.199462-46.591587 231.232576-131.263217 315.455235C744.1288 911.615966 631.648434 958.016611 512 958.016611zM512 129.983389c-102.623626 0-199.071738 39.743475-271.583282 111.936783-72.480581 72.12794-112.416718 168.063432-112.416718 270.079828s39.903454 197.951888 112.384034 270.047144c72.511544 72.191587 168.959656 111.936783 271.583282 111.936783 102.592662 0 199.071738-39.743475 271.583282-111.936783 72.480581-72.160624 112.416718-168.063432 112.384034-270.079828 0-102.016396-39.903454-197.919204-112.384034-270.016181C711.071738 169.759548 614.592662 129.983389 512 129.983389z"
                    fill="#575B66" p-id="2283"></path>
                  <path
                    d="M736.00086 480.00086 544.00086 480.00086 544.00086 288.00086c0-17.664722-14.336138-32.00086-32.00086-32.00086s-32.00086 14.336138-32.00086 32.00086l0 192L288.00086 480.00086c-17.664722 0-32.00086 14.336138-32.00086 32.00086s14.336138 32.00086 32.00086 32.00086l192 0 0 192c0 17.695686 14.336138 32.00086 32.00086 32.00086s32.00086-14.303454 32.00086-32.00086L544.00258 544.00086l192 0c17.695686 0 32.00086-14.336138 32.00086-32.00086S753.696546 480.00086 736.00086 480.00086z"
                    fill="#575B66" p-id="2284"></path>
                </svg>
              </label>
              <input type="file" name="image" id="image" style="display: none;" @change="cuisinesChange">
              <div v-for="(url, index) in imageList" :key="index">
                <!-- 显示图片，使用 :src 绑定图片的 URL -->
                <img :src="url.url" alt="图片" style="width: 100px; height: auto; margin: 10px;" />
              </div>
            </el-form-item>
            <el-button type="primary" @click="submitPost">提交</el-button>
            <el-button type="default" @click="closeMask">关闭</el-button>
          </div>
        </div>
      </el-main>
      <el-footer height="100%">
        <FooterView />
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import HeaderView from '@/view/HeaderView.vue';
import FooterView from '@/view/FooterView.vue';
import req from '@/utils/request';
import { mapGetters } from 'vuex';

export default {
  name: 'UserCommunicationView',
  components: {
    HeaderView,
    FooterView
  },
  data() {
    return {
      posts: [],
      showMask: false, // 控制遮罩的显示
      newPostContent: '', // 新分享内容
      imageList: [] // 上传的图片列表
    };
  },
  computed: {
    ...mapGetters(['userInfo']) // 获取用户信息
  },
  mounted() {
    req.get("/userCommunication/list").then(res => {
      this.posts = res.data;
    });
  },
  methods: {
    sharePost() {
      this.showMask = true; // 显示遮罩
    },
    closeMask() {
      this.showMask = false; // 关闭遮罩
      this.newPostContent = ''; // 清空内容
      this.imageList = []; // 清空图片列表
    },
    handleImageChange(file, fileList) {
      this.imageList = fileList; // 更新图片列表
    },
    cuisinesChange() {
      req.postupload("/file/upload/image", { "image": event.target.files[0] }).then(res => {
        // 将上传后的图片 URL 添加到 urls 数组中
        this.imageList.push({ url: res.data });
      });
    },
    submitPost() {
      // 这里可以添加提交分享的逻辑
      if (this.newPostContent.trim() === '') {
        alert('分享内容不能为空');
        return;
      }
      const communicationVo = {
        imgs: this.imageList,
        userCommunication: {
          content: this.newPostContent,
          userId: this.userInfo.uid
        }
      };
      req.post("/userCommunication/save", communicationVo).then(res => {
        this.closeMask(); // 关闭遮罩
        this.$message.success('分享成功！');
        location.reload();
      });
    }
  }
}
</script>

<style scoped>
.communication-box {
  width: 1200px;
  margin: 20px auto;
  background-color: white;
  min-height: 600px;
  padding-top: 52px;
  margin-top: 100px;
}

.post-list {
  padding: 20px;
}

.post-item {
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 15px;
}

.post-header {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-info {
  flex: 1;
}

.post-content {
  margin-top: 10px;
}

.post-images {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.post-image {
  max-width: 100%;
  border-radius: 8px;
  margin-right: 10px;
  margin-bottom: 10px;
  width: calc(33% - 10px);
}

/* 添加浮动按钮的样式 */
.floating-button {
  position: fixed;
  bottom: 30px;
  right: 200px;
  width: 60px;
  height: 60px;
  background-color: #B01F24;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.3s;
}

.floating-button:hover {
  background-color: #d4383f;
  /* 悬停时的颜色 */
}

/* 遮罩样式 */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.mask-content {
  width: 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 8px;
  z-index: 1001;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
</style>